<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript">
    $(function(){
        var ws;
        //检测浏览器是否支持webSocket
        if("WebSocket" in window){
            $("#content").html("您的浏览器支持webSocket!");
            //模拟产生clientID
            // let clientID = Math.ceil(Math.random()*100);
            let clientID = 123;

            //创建 WebSocket 对象,注意请求路径！！！！
            ws = new WebSocket("ws://127.0.0.1:7009/testWebSocket/"+clientID);

            //与服务端建立连接时触发
            ws.onopen = function(){
                $("#content").append("<p>与服务端建立连接建立成功！您的客户端ID="+clientID+"</p>");

                //模拟发送数据到服务器
                ws.send("你好服务端！我是客户端 "+clientID);
            }

            //接收到服务端消息时触发
            ws.onmessage = function (evt) {
                let received_msg = evt.data;
                $("#content").append("<p>接收到服务端消息:"+received_msg+"</p>");
            };

            //服务端关闭连接时触发
            ws.onclose = function() {
                console.error("连接已经关闭.....")
            };
        }else{
            $("#content").html("您的浏览器不支持webSocket！");
        }
    })
</script>
</html>

